<script setup lang="ts">
import { onBeforeUnmount } from "vue"
import useAppStore from "@/pinia"
const app = useAppStore()

// 销毁时 取消监听
onBeforeUnmount(() => {
    document.removeEventListener("click", fc)
})

// 禁用右键菜单
document.addEventListener("contextmenu", (e) => {
    e.preventDefault()
})
</script>

<template>
    <div class="panel">
        <router-view v-slot="{ Component }">
            <transition leave-active-class="leave" enter-active-class="enter" mode="out-in">
                <keep-alive>
                    <component :is="Component" />
                </keep-alive>
            </transition>
        </router-view>
    </div>
</template>

<style lang="scss" scoped>
.panel {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .leave {
        animation: leave 0.2s ease-in-out;
    }

    .enter {
        animation: enter 0.3s ease-in-out;
    }

    @keyframes leave {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            transform: translateX(-10%);
            opacity: 0;
        }
    }

    @keyframes enter {
        0% {
            opacity: 0.4;
        }

        100% {
            opacity: 1;
        }
    }
}
</style>
